<template>
    <div class="mixBase" >
        <div class="header">
            <div class="logo-icon float-left">
                <img  src="./../../../static/img/logo.png"/>仁青益寿后台管理系统
            </div> 
            <div class="float-right">
                <el-dropdown :hide-on-click="false">
                <span class="el-dropdown-link">
                    <i class="el-icon-setting setIcon"></i>
                </span>
                <el-dropdown-menu slot="dropdown"> 
                    <el-dropdown-item  @click.native="jumpLink('accountSetting')">修改密码</el-dropdown-item>
                    <el-dropdown-item @click.native="jumpLogin('Login')">退出登录</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>

        <div class=" mixBase-content":class="{'content-active':isCollapse}"> 
            <!--nav-->
            <div class="nav-list float-left" :style="{'width:200px':isCollapse}"> 
                <div   class="open-nav text-right"  @click="isCollapse=!isCollapse">
                    <span class="el-icon-arrow-left" :class="{'el-icon-arrow-right':!isCollapse}"></span>
                </div>
                <el-menu 
                default-active="1-4-1" 
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose" 
                :collapse="isCollapse" 
                > 

                    <el-submenu index="1" v-show="showMenuList.indexOf('1')!=-1">
                        <template slot="title"> <i class="iconfont icon-shouye"></i> <span slot="title">首页</span>
                        </template>
                        <el-menu-item-group> 
                            <el-menu-item index="1-1" @click="jumpLink('systemSetting')">系统设置</el-menu-item>
                            <el-menu-item index="1-2" @click="jumpLink('accountSetting')">账户设置</el-menu-item>
                        </el-menu-item-group> 
                    </el-submenu> 

                    <el-submenu index="2" v-show="showMenuList.indexOf('2')!=-1">
                        <template slot="title"> <i class="iconfont icon-yisheng"></i> <span slot="title">医生</span>
                        </template>
                        <el-menu-item-group> 
                            <!--<el-menu-item index="2-1"  @click="jumpLink('doctorAuditingList')">评价详情</el-menu-item>-->
                            <el-menu-item index="2-2"  @click="jumpLink('doctorEvaluate')">医生评价</el-menu-item>
                            <el-menu-item index="2-3"  @click="jumpLink('doctorList')">医生列表</el-menu-item>
                            <el-menu-item index="2-4"  @click="jumpLink('addDoctor')">添加医生</el-menu-item>
                        <!-- <el-menu-item index="2-5">审核列表</el-menu-item> -->
                        </el-menu-item-group> 
                    </el-submenu> 

                    <el-submenu index="3" v-show="showMenuList.indexOf('3')!=-1||showMenuList.indexOf('3.1')!=-1||showMenuList.indexOf('3.2')!=-1">
                        <template slot="title"> <i class="iconfont icon-chufang"></i> <span slot="title">处方单</span>
                        </template>
                        <el-menu-item-group> 
                            <el-menu-item index="3-1" @click="jumpLink('RecipeList')">处方单列表</el-menu-item>
                        </el-menu-item-group> 
                    </el-submenu> 

                    <el-submenu index="4"  v-show="showMenuList.indexOf('4')!=-1">
                        <template slot="title"> <i class="iconfont icon-disease-medication"></i> <span slot="title">药材管理</span>
                        </template>
                        <el-menu-item-group> 
                            <el-menu-item index="4-1" @click="jumpLink('HerbList')">药材列表</el-menu-item> 
                        </el-menu-item-group> 
                    </el-submenu> 

                    <el-submenu index="5"  v-show="showMenuList.indexOf('5')!=-1">
                        <template slot="title"> <i class="iconfont icon-wenzhen"></i> <span slot="title">问诊管理</span>
                        </template>
                        <el-menu-item-group> 
                            <el-menu-item index="5-1" @click="jumpLink('askList')">问诊列表</el-menu-item> 
                        </el-menu-item-group> 
                    </el-submenu> 


                    <el-submenu index="6"  v-show="showMenuList.indexOf('6')!=-1">
                        <template slot="title"> <i class="iconfont icon-yonghu1"></i> <span slot="title">用户</span>
                        </template>
                        <el-menu-item-group> 
                            <!--<el-menu-item index="6-1">会员审核</el-menu-item> -->
                            <el-menu-item index="6-1"  @click="jumpLink('userList')">用户列表</el-menu-item> 
                        </el-menu-item-group> 
                    </el-submenu> 

                    <el-submenu index="7"  v-show="showMenuList.indexOf('7')!=-1">
                        <template slot="title"> <i class="iconfont icon-liebiao"></i> <span slot="title">内容</span> </template>
                        <el-submenu index="7-1">
                            <template slot="title">长寿百方</template>
                            <el-menu-item index="7-1-1" @click="jumpLink('prescripList')">药方列表</el-menu-item>
                            <el-menu-item index="7-1-2" @click="jumpLink('prescripClassList')">药方分类列表</el-menu-item>
                            <el-menu-item index="7-1-3" @click="jumpLink('addPrescrip')">添加药方</el-menu-item>
                            <el-menu-item index="7-1-4" @click="jumpLink('prescripAddClass')">添加药方分类</el-menu-item>
                        </el-submenu>
                        <el-submenu index="7-2">
                            <template slot="title">长寿功法</template>
                            <el-menu-item index="7-2-1" @click="jumpLink('methodTextList')">功法列表</el-menu-item>
                            <el-menu-item index="7-2-2" @click="jumpLink('methodClassList')">功法分类列表</el-menu-item>
                            <el-menu-item index="7-2-3" @click="jumpLink('addMethodText')">添加功法</el-menu-item>
                            <el-menu-item index="7-2-4" @click="jumpLink('methodAddClass')">添加功法分类</el-menu-item>
                        </el-submenu>
                        <el-submenu index="7-3">
                            <template slot="title">长寿经穴</template>
                            <el-menu-item index="7-3-1"  @click="jumpLink('AcupointList')">穴位列表</el-menu-item>
                            <!--<el-menu-item index="7-3-2"  @click="jumpLink('AddAcupoint')">添加分类</el-menu-item>-->
                            <el-menu-item index="7-3-2"  @click="jumpLink('AddAcupoint')">添加穴位</el-menu-item> 
                        </el-submenu>
                        <el-submenu index="7-4">
                            <template slot="title">长寿家族</template>
                            <el-menu-item index="7-4-1" @click="jumpLink('familyImgTextList')">图文列表</el-menu-item>
                            <el-menu-item index="7-4-2" @click="jumpLink('familyTopicList')">话题列表</el-menu-item>
                            <el-menu-item index="7-4-3" @click="jumpLink('facebookList')">帖子列表</el-menu-item>
                            <el-menu-item index="7-4-4" @click="jumpLink('familyAddImgText')">添加图文</el-menu-item>
                            <el-menu-item index="7-4-5" @click="jumpLink('familyAddTopic')">添加话题</el-menu-item>
                            <el-menu-item index="7-4-6" @click="jumpLink('addFacebook')">添加帖子</el-menu-item>
                        </el-submenu>
                        <el-submenu index="7-5">
                            <template slot="title">感寿之象</template>
                            <el-menu-item index="7-5-1" @click="jumpLink('videoList')">视频列表</el-menu-item>
                            <el-menu-item index="7-5-2" @click="jumpLink('videoClassList')">分类列表</el-menu-item>
                            <el-menu-item index="7-5-3" @click="jumpLink('videoAddClass')">添加分类</el-menu-item>
                            <el-menu-item index="7-5-4" @click="jumpLink('addvideo')">添加视频</el-menu-item>
                        </el-submenu>
                        <el-submenu index="7-6">
                            <template slot="title">长寿之声</template>
                            <el-menu-item index="7-6-1" @click="jumpLink('voiceList')">音频列表</el-menu-item>
                            <el-menu-item index="7-6-2" @click="jumpLink('voiceClassList')">分类列表</el-menu-item>
                            <el-menu-item index="7-6-3" @click="jumpLink('voiceAddClass')">添加分类</el-menu-item>
                            <el-menu-item index="7-6-4" @click="jumpLink('addvoice')">添加音频</el-menu-item>
                        </el-submenu>

                        <el-submenu index="7-7">
                            <template slot="title">资讯管理</template>
                            <el-menu-item index="7-7-1"  @click="jumpLink('articleList')">资讯列表</el-menu-item>
                            <el-menu-item index="7-7-2"  @click="jumpLink('mclassList')">分类列表</el-menu-item>
                            <el-menu-item index="7-7-3"  @click="jumpLink('mclassEdit')">添加分类</el-menu-item>
                            <el-menu-item index="7-7-4"  @click="jumpLink('articleEdit')">添加资讯</el-menu-item>
                        </el-submenu>
                    </el-submenu> 

                    <el-submenu index="8" v-show="showMenuList.indexOf('8')!=-1">
                        <template slot="title"> <i class="iconfont icon-zhanghaoguanli1"></i> <span slot="title">账号管理</span>
                        </template>
                        <el-menu-item-group> 
                            <!--<el-menu-item index="8-1" @click="jumpLink('adminEdit')">添加成员</el-menu-item>--> 
                            <el-menu-item index="8-1" @click="jumpLink('adminList')">成员管理</el-menu-item> 
                        </el-menu-item-group> 
                    </el-submenu> 


                </el-menu>

        </div>

            <div class="content-main" > 
                <router-view/>  
            </div>
        </div>
        
    </div>
</template>
<script>
import * as api from './../../api/api'
export default {
    name: 'mixBase',
    data () {
        return {
            isCollapse:false,
            showMenuList:[],
        }
    },
    created() { 
        this.showMenuList=sessionStorage.getItem('models').split(','); 
    },
    methods: {
        handleOpen(key, keyPath) {
        console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }, 
        //跳转classlist
        jumpLink(val){
            this.$router.push({name:val})
        },
        jumpLogin(val){
            sessionStorage.setItem("h_token",'')
            sessionStorage.setItem("u_id",'')
            this.$router.push({name:val})
        }
    }
}
</script>
<style scoped lang="scss">
.mixBase{
    width:100%;
    height:100%;
    overflow:auto;
    padding-top:50px;
    box-sizing:border-box;
    .mixBase-content{ 
        width:100%;
        height:100%;
        padding:0 0 0 200px; 
        transition: padding .5s;
        -moz-transition: padding .5s;  /* Firefox 4 */
        -webkit-transition: padding .5s;  /* Safari 和 Chrome */
        -o-transition: padding .5s;  /* Opera */
        box-sizing:border-box;
    }
    .content-active{
        padding:0 0 0 65px;
        transition: padding .5s;
        -moz-transition: padding .5s;  /* Firefox 4 */
        -webkit-transition: padding .5s;  /* Safari 和 Chrome */
        -o-transition: padding .5s;  /* Opera */
    }
    .header{
        height:50px;
        width:100%;
        position:fixed;
        top:0;
        background:#fff;
        color:#333; 
        div{
            display:inline-block;
        }
        .logo-icon{
            height:50px;
            width: 200px; 
            line-height:50px;
            box-sizing:border-box;
            background-color: #fff;  
            img{
                height:100%;
                vertical-align: middle;
            }
        }

    }
    .tabs{
        padding-left: 2%;
    }
    .el-tabs__item{
        font-size: 20px;
    }
    .float-right{
        width: 5%;
        height: 40%;
    }
    .el-dropdown-link {
        line-height:50px;
        cursor: pointer;
        color: black;
    }
    .el-dropdown{
        padding-top: 8%;
    }
    .el-icon-arrow-down{
        font-size: 30px;
    }
    .setIcon{
        font-size:30px;
    }
    .nav-list{ 
        height:100%;
        overflow:auto;
        position: fixed;
        left:0;
        z-index: 10;
        background:#fff;
        border-right: solid 1px #E6E6E6;
        
        .open-nav{
            width:100%;
            box-sizing:border-box; 
            padding: 14px 20px;
            cursor: pointer;
            background-color: #ECFBFF;
            color:#333;
            &:hover{
                background:#ECF5FF;
            }
        }
        .el-menu{
            border-right: solid 1px #fff;
        }
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px; 
        } 
        .iconfont{
            font-size:16px;
            font-weight:bold;
            margin-right:10px;
        }
        .nav-menu-open{
            width:200px;
        }
    }
    .nav-list::-webkit-scrollbar{
        width: 2px;
        height: 6px;
        background-color: #F5F5F5;
    }
    .nav-list::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    .nav-list::-webkit-scrollbar-thumb{
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }
    .content-main{ 
        width:100%;
        height:100%; 
        overflow: auto;
    }    
}

</style>
